<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="">
    <meta name="author" content="">
	
    <title>Mobile Shop</title>
	
    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="../../statics/css/bootstrap.min.css"  type="text/css">
	
	<!-- Custom CSS -->
    <link rel="stylesheet" href="../../statics/css/style.css">
	
	
	<!-- Custom Fonts -->
    <link rel="stylesheet" href="../../statics/font-awesome/css/font-awesome.min.css"  type="text/css">
    <link rel="stylesheet" href="../../statics/fonts/font-slider.css" type="text/css">
	
	<!-- jQuery and Modernizr-->
	<script src="../../statics/js/jquery-2.1.1.js"></script>
	
	<!-- Core JavaScript Files -->  	 
    <script src="../../statics/js/bootstrap.min.js"></script>

    <script src="../../statics/js/register.js"></script>
	
	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="../../statics/js/html5shiv.js"></script>
        <script src="../../statics/js/respond.min.js"></script>
    <![endif]-->
</head>

<body>
	<!--Top-->
	<nav id="top">
		<div class="container">
			<div class="row">
				<div class="col-xs-6">
					<select class="language">
						<option value="English" selected>English</option>
						<option value="France">France</option>
						<option value="Germany">Germany</option>
					</select>
					<select class="currency">
						<option value="USD" selected>USD</option>
						<option value="EUR">EUR</option>
						<option value="DDD">DDD</option>
					</select>
				</div>
				<div class="col-xs-6">
					<ul class="top-link">
                        <c:choose>
                            <c:when test="${empty userInfo.username}">
                                <li><a href="/account"><span class="glyphicon glyphicon-user"></span>Login</a></li>
                            </c:when>
                            <c:otherwise>
                                <li><span class="glyphicon glyphicon-user"></span>${userInfo.username}</li>
                                <li><a href="/exit"><span>logout</span></a></li>
                            </c:otherwise>
                        </c:choose>
					</ul>
				</div>
			</div>
		</div>
	</nav>
	<!--Header-->
	<header class="container">
		<div class="row">
			<div class="col-md-4">
				<div id="logo"><img src="../../statics/images/logo.png" /></div>
			</div>
			<div class="col-md-4">
				<form class="form-search" action="/category" method="get">
					<input type="text" class="input-medium search-query" name="searchItem">
					<button type="submit" class="btn"><span class="glyphicon glyphicon-search"></span></button>
				</form>
			</div>
			<div class="col-md-4">
				<div id="cart"><a class="btn btn-1" href="/cart"><span class="glyphicon glyphicon-shopping-cart"></span>CART : ${cartItemCount} ITEM</a></div>
			</div>
		</div>
	</header>
	<!--Navigation-->
    <nav id="menu" class="navbar">
		<div class="container">
			<div class="navbar-header"><span id="heading" class="visible-xs">Categories</span>
			  <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
			</div>
			<div class="collapse navbar-collapse navbar-ex1-collapse">
				<ul class="nav navbar-nav">
					<li><a href="/index">Home</a></li>
					<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">PC Computers</a>
						<div class="dropdown-menu">
							<div class="dropdown-inner">
								<ul class="list-unstyled">
									<li><a href="/category">Window</a></li>
									<li><a href="/category">MacBook</a></li>
								</ul>
							</div>
						</div>
					</li>
					<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Laptops &amp; Notebooks</a>
						<div class="dropdown-menu">
							<div class="dropdown-inner">
								<ul class="list-unstyled">
									<li><a href="/category">Dell</a></li>
									<li><a href="/category">Asus</a></li>
									<li><a href="/category">Samsung</a></li>
									<li><a href="/category">Lenovo</a></li>
									<li><a href="/category">Acer</a></li>
								</ul>
							</div> 
						</div>
					</li>
					<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Mobiles &amp; Tablet</a>
						<div class="dropdown-menu" style="margin-left: -203.625px;">
							<div class="dropdown-inner">
								<ul class="list-unstyled">
									<li><a href="/category">Iphone</a></li>
									<li><a href="/category">Samsung</a></li>
									<li><a href="/category">Nokia</a></li>
									<li><a href="/category">Lenovo</a></li>
									<li><a href="/category">Google</a></li>
								</ul>
								<ul class="list-unstyled">
									<li><a href="/category">Nexus</a></li>
									<li><a href="/category">Dell</a></li>
									<li><a href="/category">Oppo</a></li>
									<li><a href="/category">Blackberry</a></li>
									<li><a href="/category">HTC</a></li>
								</ul>
								<ul class="list-unstyled">
									<li><a href="/category">LG</a></li>
									<li><a href="/category">Q-Mobiles</a></li>
									<li><a href="/category">Sony</a></li>
									<li><a href="/category">Wiko</a></li>
									<li><a href="/category">T&T</a></li>
								</ul>
							</div>
						</div>
					</li>
					<li><a href="/category">Software</a></li>
				</ul>
			</div>
		</div>
	</nav>
	<!--//////////////////////////////////////////////////-->
	<!--///////////////////Account Page///////////////////-->
	<!--//////////////////////////////////////////////////-->
	<div id="page-content" class="single-page">
		<div class="container">
			<div class="row">
				<div class="col-lg-12">
					<ul class="breadcrumb">
						<li><a href="/index">Home</a></li>
						<li><a href="/account">Account</a></li>
					</ul>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6">
					<div class="heading"><h2>Login</h2></div>
					<form name="form1" id="ff1" method="post" action="/login">
						<div class="form-group">
							<input type="text" class="form-control" placeholder="Username :" name="userName" id="userName" required>
						</div>
						<div class="form-group">
							<input type="password" class="form-control" placeholder="Password :" name="userPassword" id="userPassword" required>
						</div>
						<button type="submit" class="btn btn-1" name="login" id="login">Login</button>
						<a href="/forgotPassword">Forgot Your Password ?</a>
					</form>
				</div>
				<div class="col-md-6">
					<div class="heading"><h2>New User ? Create An Account.</h2></div>
					<form name="form2" id="ff2" method="post" action="/register">
						<div class="form-group">
							<input type="text" class="form-control" placeholder="Name :" name="name" id="name" required>
                            <p id="matchName" style="display: none;color: red;">UserName already exists</p>
                            <p id="nullName" style="display: none;color: red;">UserName can not be empty</p>
						</div>
						<div class="form-group">
							<input type="email" class="form-control" placeholder="Email Address :" name="email" id="email" required>
                            <p id="matchEmail" style="display: none;color: red;">Email format does not match</p>
                            <p id="existEmail" style="display: none;color: red;">Email already exists</p>
						</div>
						<div class="form-group">
							<input type="tel" class="form-control" placeholder="Mobile :" name="phone" id="phone" required>
                            <p id="matchPhone" style="display: none;color: red;">Phone format does not match</p>
						</div>
						<div class="form-group">
							<input name="gender" id="gender_male" type="radio" checked="true" value="male"> Male <input name="gender" id="gender_female" type="radio" value="female"> Female
						</div>
						<div class="form-group">
							<input type="password" class="form-control" placeholder="Password :" name="password" id="password" required>
						</div>
						<div class="form-group">
                            <input type="password" class="form-control" placeholder="Retype Password :" name="repassword" id="repassword" required>
                            <p id="matchPassword" style="display: none;color: red">Passwords do not match</p>
						</div>
						<div class="form-group">
							<input name="agree" id="agree" type="checkbox" > I agree to your website.
						</div>
                        <input type="hidden" id="path" name="path" value="${pageContext.request.contextPath }"/>
						<button type="submit" class="btn btn-1" id = "add">Create</button>
					</form>
				</div>
			</div>
		</div>
	</div>
	<footer>
		<div class="container">
			<div class="wrap-footer">
				<div class="row">
					<div class="col-md-3 col-footer footer-1">
						<img src="../../statics/images/logofooter.png" />
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
					</div>
					<div class="col-md-3 col-footer footer-2">
						<div class="heading"><h4>Customer Service</h4></div>
						<ul>
							<li><a href="#">About Us</a></li>
							<li><a href="#">Delivery Information</a></li>
							<li><a href="#">Privacy Policy</a></li>
							<li><a href="#">Terms & Conditions</a></li>
							<li><a href="#">Contact Us</a></li>
						</ul>
					</div>
					<div class="col-md-3 col-footer footer-3">
						<div class="heading"><h4>My Account</h4></div>
						<ul>
							<li><a href="#">My Account</a></li>
							<li><a href="#">Brands</a></li>
							<li><a href="#">Gift Vouchers</a></li>
							<li><a href="#">Specials</a></li>
							<li><a href="#">Site Map</a></li>
						</ul>
					</div>
					<div class="col-md-3 col-footer footer-4">
						<div class="heading"><h4>Contact Us</h4></div>
						<ul>
							<li><span class="glyphicon glyphicon-home"></span>California, United States 3000009</li>
							<li><span class="glyphicon glyphicon-earphone"></span>+91 8866888111</li>
							<li><span class="glyphicon glyphicon-envelope"></span>infor@yoursite.com</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="copyright">
			<div class="container">
				<div class="row">
					<div class="col-md-6">
						Copyright &copy; 2015.Company name All rights reserved.
					</div>
					<div class="col-md-6">
						<div class="pull-right">
							<ul>
								<li><img src="../../statics/images/visa-curved-32px.png" /></li>
								<li><img src="../../statics/images/paypal-curved-32px.png" /></li>
								<li><img src="../../statics/images/discover-curved-32px.png" /></li>
								<li><img src="../../statics/images/maestro-curved-32px.png" /></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</footer>
</body>
</html>